<!DOCTYPE html>
<html lang="en">

  <head>
    <title>离线瓦片地图</title>
    <link rel="stylesheet" type="text/css" href="./ol.css">
    <script type="text/javascript" src="./ol.js" charset="utf-8"></script>
  </head>

<body>
  <div id="map" style="width:100%;"></div>
  <script type="text/javascript">
    let centerPos = ol.proj.transform([117.27, 31.68], 'EPSG:4326', 'EPSG:3857');

    let map = new ol.Map({
      view: new ol.View({
        center: centerPos,
        zoom: 10,
        maxZoom: 15,
        minZoom: 9
      }),
      target: 'map'
    });

    // map.on('click', function (e) {
    //   let t = ol.proj.transform(map.getEvebtCiirdubate(event), 'EPSG:3857', 'EPSG:4326');
    //   alert(t);
    // })
    function zeroFill(num, len, radix) {
      var str = num.toString(radix || 10);
      while (str.length < len) {
        str = "0" + str;
      }
      return str;
    }

    let tileLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        tileUrlFunction: function (coordinate) {
          var x = 'C' + zeroFill(coordinate[1], 8, 16);
          var y = 'R' + zeroFill(coordinate[2], 8, 16);
          var z = 'L' + zeroFill(coordinate[0], 2, 10);
          return 'http://localhost:8080/GisMap/_alllayers/' + z + '/' + y + '/' + x + '.png';
        },
        prijection: 'EPSG:3857'
      })
    });
    map.addLayer(tileLayer);
 //   map.addLayer(null);
  </script>
</body>

</html>